<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			box-sizing: border-box;
			width: 100px;
			height: 100px;
			border:1px solid red;
			padding:10px;
			margin:10px;
		}
		
		/*
		怪异盒子：
			1.盒子内容区域的宽度？
				width=100-2-20=78
			2.盒子的宽度？
				width:100px;
			3.盒子在浏览器中所占据的宽度？
				width=盒子+margin=100+20=120px;

		*/
		/*
		标准盒子：
			1.盒子内容区域的宽度？
				width:100px;
			2.盒子的宽度？
				width=content+padding+border=100+20+2=122
			3.盒子在浏览器中所占据的宽度？
				width=盒子width+margin=122+20=142

		*/
	</style>
</head>
<body>
	<div></div>
</body>
</html>










